// 1.1 src/store/index.js 创建store

import { createStore } from 'redux';

const initialState = {
  // 2.1 准备list的初始值
  list: [
    {
      id: 1,
      task: 'React',
      isDone: false,
    },
    {
      id: 2,
      task: 'React2',
      isDone: true,
    },
    {
      id: 3,
      task: 'React3',
      isDone: false,
    },
  ],
  type: 'all',
};

// 1.2 创建reducer函数
// rxreducer
// 转换为普通函数，💥并且给一个名字
function reducer(state = initialState, { type, payload }) {
  console.warn('Logger:type, payload  ----->  ', type, payload);
  switch (type) {
    // 3.3 增加更新的逻辑分支
    case 'updateById':
      return {
        ...state,
        // 4. 使用新值覆盖旧值
        list: state.list.map((item) => ({
          ...item,
          isDone: item.id === payload ? !item.isDone : item.isDone,
        })),
      };
    //  4.1 reducer中增加逻辑分支
    case 'delById':
      return {
        ...state,
        // 4.4 完成计算逻辑
        list: state.list.filter((item) => item.id !== payload),
      };

    // 5.3 新增逻辑分支
    case 'addTask':
      return {
        ...state,
        // 5.6 完成新增的计算逻辑
        list: [payload, ...state.list],
      };

    default:
      return state;
  }
}

//  1.3 creaStore创建store对象并且导出
const store = createStore(reducer);
export default store;

// 3.1准备一个action创建函数
export const udpateByIdActionCreator = (payload) => {
  return {
    type: 'updateById',
    payload,
  };
};

// 4.2 定义action创建函数
export const delByIdActionCreator = (id) => {
  return {
    type: 'delById',
    payload: id,
  };
};

// 5.4 定义新增的action创建函数
export const addTaskActionCreator = (task) => {
  const newTodo = {
    task,
    id: Date.now(),
    isDone: false,
  };
  return {
    type: 'addTask',
    payload: newTodo,
  };
};
